<template>
  <div class="async-component">
    <h2>异步组件</h2>
    <button @click="loadAsyncComponent">加载异步组件</button>
    <component v-if="loadedComponent" :is="loadedComponent"></component>
  </div>
</template>

<script>
export default {
  name: 'AsyncComponent',
  data() {
    return {
      loadedComponent: null,
    }
  },
  methods: {
    loadAsyncComponent() {
      import('./LazyLoadedComponent.vue').then((module) => {
        this.loadedComponent = module.default
      })
    },
  },
}
</script>

<style scoped>
.async-component {
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
}
</style>
